<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--  引入vue.js-->
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="cli">点我更换地址</button>
    <a :href="url">百度</a>
  </div>


  <script>
<!--    创建vue对象，管理页面元素-->
    new Vue({
      //el表示我当前这个Vue对象要管理哪个页面元素
      el:"#app",
      //data表示vue对象的数据模型，需要和vue管理的页面元素实现绑定
      data:{
        url:"http://www.baidu.com"
      },
      //methods表示这个vue对象的行为，需要和页面元素的事件进行绑定
      methods:{
        cli(){
          //更换a标签的地址
          this.url = "http://www.1000phone.com";
        }
      }
    });
  </script>
</body>
</html>